<html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>电子版试卷书申领表</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="http://tmall.fc62.com/mobile/themesmobile/68ecshopcom_mobile/css/queren.css" />
<script type="text/javascript" src="http://tmall.fc62.com/mobile/themesmobile/68ecshopcom_mobile/js/layer_mobile/layer.js"></script>
<link rel="stylesheet" type="text/css" href="http://tmall.fc62.com/mobile/themesmobile/68ecshopcom_mobile/css/layer.css" />
<script src="http://tmall.fc62.com/mobile/themesmobile/68ecshopcom_mobile/js/jquery.1.9.1.js"></script>
<script type="text/javascript" src="http://tmall.fc62.com/mobile/themesmobile/68ecshopcom_mobile/js/rem.js"></script>
</head>
<style>
body{background: #fff;}
#theForm{padding: 0 1rem;}
.formlist{padding: 0;margin: 15% auto;margin-bottom: 0;}
@media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
    .formlist { margin: 30% auto;margin-bottom: 0;}
}
@media only screen and (device-width : 414px)  and (device-height : 896px) and (-webkit-device-pixel-ratio : 3) {
    .formlist {margin: 30% auto;margin-bottom: 0;}
}
.formlist li span{display: block;width: 100%;font-size: 0.3rem;margin-top: 0.9rem;font-weight: bold;}
.dotm_btn1{width: 100%;background: #ef3841;margin-top: 1.2rem;}
.show{margin-top: 0.3rem;color: #777;line-height: 0.45rem;}
.layui-m-layercont{color: #fff;}
.container{margin-top: 0.3rem;}
.container p{
    font-family: "微软雅黑";
    color: #888;
}
.val-box {
    display: inline-block;
    height: 40px;
    width: 100%;
    text-align: center;
    position: relative;
    background: #FFFFFF;
}
.val-box input[type=number] {
    position: absolute;
    left: 0;
    top: 0;
    height: 0px;
    width: 100%;
    opacity: 0.9;
    z-index: -999;
    outline: none;
    color:transparent;text-shadow:0 0 0 #333;
    text-indent: -999em;
}
.val-box div {
    width: 0.7rem;
    height: 0.7rem;
    line-height: 0.7rem;
    border: 1px solid #DDD;
    float: left;
    margin: 0 0.17rem 0 0;
    z-index: 5;
    font-size: 0.3rem;
    font-family: arial;
    font-weight: 530;
    text-align: center;
    cursor: text;
}
.val-box .available {
    border-color: #0081db;
}
select{
    color: #999;
    margin-top: 0.3rem;
    font-size: 0.28rem;
    width: 100%;
    height: 0.73rem;
    background: #fff;
    outline: none;
    border: 1px solid #ccc;
    border-radius: 0;
    appearance:none;  
    -moz-appearance:none;  
    -webkit-appearance:none;
    padding-right: 0.3rem;
    background: url(http://tmall.fc62.com/mobile/themesmobile/68ecshopcom_mobile/images/selectjt.png) no-repeat scroll right center transparent;
    background-size: 10px 7px; 
    background-position: top 14px right 10px;
}
select::-ms-expand { display: none; } 
</style>
<script type="text/javascript">
$(() => {
    var valCodeInput = $('#val-code-input');
    var valCodeItems = $("div[name='val-item']");
    var regex = /^[\d]+$/;
    var valCodeLength = 0;
    $('#val-box').on('click',()=>{
        valCodeInput.focus();
    })
    valCodeInput.on('input propertychange change', (e) => {
        valCodeLength = valCodeInput.val().length;
        if(valCodeInput.val() && regex.test(valCodeInput.val())) {
            $(valCodeItems[valCodeLength - 1]).addClass('available');
            $(valCodeItems[valCodeLength - 1]).text(valCodeInput.val().substring(valCodeLength - 1, valCodeLength));
        }
    })
    $(this).on('keyup', (e) => {
        if(e.keyCode === 8) {
            $(valCodeItems[valCodeLength]).removeClass('available');
            $(valCodeItems[valCodeLength]).text("");
        }
    });
})
function checkForNum(obj) {
    obj.value = obj.value.replace(/[\D]/g, '');
}
</script>
<body>
  <form action="" method="post" name="theForm" id="theForm" >
	<ul class="formlist">
		<li>
			<span>请选择学段</span>
			<select  name="row[type_pdf]"> 
				<option value="1">低段</option>
				<option value="2">中段</option>
				<option value="3">高段</option>
			</select>
		</li>
	   <li>
		  <span>请输入您的专属账号</span>
		  <div class="container" id="test">
	            <div class="val-box" id="val-box">
	                <input id="val-code-input" type="number" name="row[code]" pattern="[0-9]*" oninput="if(value.length>6)value=value.slice(0,6);" onkeyup="checkForNum(this)"  onselectstart="return false;" onblur="checkForNum(this)" />
	                <div name="val-item"></div>
	                <div name="val-item"></div>
	                <div name="val-item"></div>
	                <div name="val-item"></div>
	                <div name="val-item"></div>
	                <div name="val-item"></div>
	            </div>
	        </div>
	   </li>
    </ul> 
     <input type="button" value="提交" class="dotm_btn1">
     <div class="show">注：每个账号仅可选择一个学段。低段供小学1~2年级学生使用；中段供小学3~4年级学生使用；高段供小学5~6年级学生使用。</div>
  </form>

<script>
$(function(){
    $('.formlist input').blur(function(){
        window.scroll(0, 0);
    });
	$("select").click(function () {
        $(this).css("color", '#333');
    });
  	$('.dotm_btn1').click(function(){
  		var xueduan = $('select').val();
		var onlyid = $('#val-code-input').val();
		if(onlyid == ""||onlyid == null){
			layer.open({
				content: '请填写您的专属账号',
				skin: 'msg',
				time: 2 //2秒后自动关闭
			});
			return false;
		}
		$.ajax({
			type:"post",
			url:"/index/special/lists",
			data:{type_pdf:xueduan,code:onlyid},
			success: function(data){
                if(data.code){
                     layer.open({
                        content:'操作成功' ,
                        skin: 'msg',
                        time: 2 //2秒后自动关闭
                    });
                     setTimeout(function () {
                        window.location.reload();
                    },2000);
                }else{
                      layer.open({
                        content:data.msg ,
                        skin: 'msg',
                        time: 2 //2秒后自动关闭
                    });
                }
                console.log(data);
				//window.location.href="form_hbkt.html";
			}
		});
	});
});
</script>  
</body>

</html>